<template>
    <div class="">
        <el-card>
            <div class="chaxuninfo"> <el-input style="width: 200px;margin-right: 10px;" placeholder="请输入UserId"
                    v-model="username"></el-input>
                <el-button type="primary" @click="getdata()" plain>查询</el-button>
            </div>
            <div class="basicinfo">
                <div class="basicavatar">
                    <el-avatar :size="size" :src="circleUrl"></el-avatar>
                </div>
                <div class="basicitem">
                    <div>
                        <span>姓名</span>{{ info.username }}
                    </div>
                    <div>
                        <span>UserId</span>{{ info.userSn }}
                    </div>
                    <div>
                        <span>cookieid</span>{{ info.cookieid }}
                    </div>
                    <div>
                        {{ info.address }}
                    </div>

                </div>
            </div>
            <div>
                <el-descriptions class="margin-top" title="用户信息" :column="2" :size="size">
                    <el-descriptions-item>
                        <template slot="label">
                            性别
                        </template>
                        {{info.gender}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            会员等级
                        </template>
                        {{info.membershipLevel}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            年龄
                        </template>
                        {{info.age}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            操作系统
                        </template>
                        {{info.operatingSystem}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            注册时间
                        </template>
                        {{info.registrationDate}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            历史购买次数
                        </template>
                        {{info.historicalPurchaseCount}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            历史付费金额
                        </template>
                        {{info.historicalPaymentAmount}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            用户活跃度
                        </template>
                        {{info.userActivityLevel}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            RFM
                        </template>
                        {{info.rfm}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            购买品类
                        </template>
                    {{info.purchaseCategory}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            购物性别
                        </template>
                        {{info.shoppingGender}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            是否反馈问题
                        </template>
                        {{info.hasFeedbackIssue == 0 ? '否':'是'}}
                    </el-descriptions-item>

                </el-descriptions>
                <el-descriptions class="margin-top" title="用户行为" :column="2" :size="size">
                    <el-descriptions-item>
                        <template slot="label">
                            近30日购买次数
                        </template>
                        {{info.recent30DaysPurchaseCount}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            近30日活跃天数
                        </template>
                        {{info.recent30DaysActiveDays}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            近30日购买金额
                        </template>
                        {{info.recent30DaysPurchaseAmount}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            最近下单距今天数
                        </template>
                        {{info.daysSinceLastOrder}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            高频活跃时间段
                        </template>
                        {{info.highFrequencyActiveTime}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            push周活跃度
                        </template>
                        {{info.pushWeeklyMonthlyActivity}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            是否短信黑名单
                        </template>
                        {{info.isSmsBlacklisted == 0 ?'否':'是'}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            订单优惠券使用率
                        </template>
                        {{info.orderCouponUsageRate}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            是否邮件黑名单
                        </template>
                        {{info.isEmailBlacklisted == 0 ?'否':'是'}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            首单距今天数
                        </template>
                        {{info.daysSinceLastOrder}}
                    </el-descriptions-item>


                </el-descriptions>
            </div>
        </el-card>
    </div>
</template>
<script>
import service from '@/request';

export default {
    data() {
        return {
            username: "",
            circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            size: "small",
            info: {}
        }
    },
    methods: {
        async getdata() {
            if (this.username == '') {

                this.$message.warning("请输入id")
            } else {
                const res = await service.get("/user/" + this.username);
                console.log(res)
                this.info = res.data

            }
        }
    }
}
</script>
<style scoped>
.basicitem div {
    display: inline-block;
    margin-right: 20px;
}

.basicitem span {
    color: #000;
    font-weight: bold;

}

.basicinfo {
    display: flex;
    margin-bottom: 20px;
    align-items: center;
}

.basicavatar {
    margin-right: 20px;
}

.chaxuninfo {
    margin-bottom: 10px;
}
</style>